import React from 'react';
import ClassNames from 'classnames';
import { viewSizeFormat } from '@/common/format';
import VideoCard from '@/components/VideoCard';
import { enumLiveTypeTextToId } from '@/common/enum';

import styles from './style.scss';

const ListVideoCard = ({ className, style, list, rows, marginLeft, marginTop, dataFormat }) => {
  const marginLeftVal = viewSizeFormat(marginLeft);
  const marginTopVal = viewSizeFormat(marginTop);

  return (
    <div
      className={ClassNames(styles.container, className)}
      style={{ ...style || {}, marginLeft: `-${marginLeftVal}px`, marginTop: `-${marginTopVal}px` }}
    >
      {list.map((row, index) => {
        const {
          roomId,
          label,
          image,
          userImage,
          nickname,
          heat,
          playing,
          sportId,
          children,
          isRecommend,
        } = dataFormat(row) || {};

        return (
          <div
            className={styles.item}
            style={{
              width: `${100 / rows}%`,
              paddingTop: `${marginTopVal}px`,
              paddingLeft: `${marginLeftVal}px`,
            }}
            key={index}
          >
            <VideoCard
              label={label}
              image={image}
              playing={playing}
              url={`/live/room/${roomId}`}
              headImage={userImage}
              userName={nickname}
              heat={heat}
              sportId={sportId}
              isRecommend={isRecommend}
            >
              {children}
            </VideoCard>
          </div>
        );
      })}
    </div>
  );
};

ListVideoCard.defaultProps = {
  list: [],
  rows: 2,
  marginLeft: 20,
  marginTop: 20,
  dataFormat: ({
    roomId,
    liveTitle,
    liveImg,
    headerImg,
    nickname,
    hot,
    liveStatus,
    liveType,
    isRecommend,
  }) => ({
    label: liveTitle,
    image: liveImg,
    playing: liveStatus === 1,
    roomId,
    userImage: headerImg,
    nickname,
    heat: hot,
    sportId: enumLiveTypeTextToId[liveType] || 0,
    isRecommend,
  }),
};

export default ListVideoCard;
